<template>
  <div>
    <yt-crud
      ref="crudRef"
      :data="data"
      :column="column"
      v-model:page="state.page"
      v-model:query="state.query"
      :total="state.total"
      :loading="state.loading"
      :fun-props="{
        exportBtn: false,
        delBtn: false,
        addBtn: false,
      }"
      :tableProps=" {
        selection: false,
        viewBtn: true,
        delBtn: false,
        editBtn: true,
        menuSlot: true,
        menuWidth: 180,
      }"
      @openBeforeFun="openBeforeFun"
      @delFun="handleDelete"
      @onLoad="getData"
      @saveFun="onSave"
    >
      <template #status="scope:any">
        <el-switch v-model="scope.row.status" active-value="Enabled" inactive-value="Disabled" @change="handleStatusChange(scope.row)" />
      </template>
    </yt-crud>
  </div>
</template>

<script lang="ts" setup>

import YtCrud from '@/components/common/yt-crud.vue'
import {
  listOssConfig,
  getOssConfig,
  delOssConfig,
  saveOssConfig,
  changeOssConfigStatus
} from '@/api/platform/ossConfig'

import {useI18n} from 'vue-i18n'
import {IColumn} from '@/components/common/types/tableCommon'
import {OssConfigVo} from '@/api/platform/ossConfig/types'
import {ComponentInternalInstance} from 'vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { YesNoEnum, EnableStatusEnum } = toRefs<any>(proxy?.useEnum('yes_no_enum', 'enable_status_enum'))
const { t } = useI18n()

const crudRef = ref()

const data = ref<OssConfigVo[]>([])
const column = ref<IColumn[]>([
  {
    label: t('platform.ossConfig.configKey'),
    key: 'configKey',
    search: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.configKey')}],
  },
  {
    label: t('platform.ossConfig.endpoint'),
    key: 'endpoint',
    search: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.endpoint')}],
  },
  {
    label: t('platform.ossConfig.domain'),
    key: 'domain',
    search: false,
  },
  {
    label: t('platform.ossConfig.accessKey'),
    key: 'accessKey',
    search: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.accessKey')}],
  },
  {
    label: t('platform.ossConfig.secretKey'),
    key: 'secretKey',
    search: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.secretKey')}],
  },
  {
    label: t('platform.ossConfig.bucketName'),
    key: 'bucketName',
    search: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.bucketName')}],
  },
  {
    label: t('platform.ossConfig.prefix'),
    key: 'prefix',
    search: false,
  },
  {
    label: t('platform.ossConfig.isHttps'),
    key: 'isHttps',
    type: 'radio',
    componentProps: {
      options: YesNoEnum,
    },
    search: false,
    formHide: false,
  },
  {
    label: t('platform.ossConfig.accessPolicy'),
    key: 'accessPolicy',
    type: 'radio',
    componentProps: {
      options: [
        {label: 'private', value: '0'},
        {label: 'public', value: '1'},
        {label: 'custom', value: '2'}
      ],
    },
    search: false,
    formHide: false,
    slot: false,
    rules: [{ required: true, message: t('platform.ossConfig.validator.accessPolicy')}],
  },
  {
    label: t('platform.ossConfig.region'),
    key: 'region',
    search: false,
  },
  {
    label: t('business.ads.status'),
    key: 'status',
    type: 'select',
    componentProps: {
      options: EnableStatusEnum,
    },
    search: false,
    formHide: true,
    slot: true,
  },
  {
    label: t('crud.table.column.note'),
    key: 'note',
    hide: true,
    formHide: false,
    colSpan: 22,
    componentProps: {
      type: 'textarea',
      rows: 2,
    }
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
])

const state = reactive({
  total: 0,
  page: {
    pageSize: 12,
    pageNum: 1,
  },
  query: {},
  loading: false,
})

const getData = () => {
  state.loading = true
  listOssConfig({
    ...state.page,
    ...state.query,
  })
  .then((res) => {
    data.value = res.data.rows || []
    state.total = res.data.total
  })
  .finally(() => {
    state.loading = false
  })
}
// 获取字典
const getDict = () => {

}


// 上传前置操作
const openBeforeFun = ({ type, data }) => {

  console.log(data)
  if (type === 'add') {
    data.isHttps = 'Y'
    data.accessPolicy = '1'
  }
}
getDict()
// 保存数据
const onSave = ({ data, cancel }: any) => {
  state.loading = true
  saveOssConfig(toRaw(data))
    .then(() => {
      ElMessage.success(t('operate.tooltip.success'))
      cancel()
      getData()
    })
    .finally(() => {
      state.loading = false
    })
}

// 删除
const handleDelete = async (row: any) => {
  state.loading = true
  delOssConfig(row.id)
    .then(() => {
      ElMessage.success(t('operate.tooltip.success'))
      getData()
    })
    .finally(() => {
      state.loading = false
    })
}

/** 状态修改  */
const handleStatusChange = async (row: any) => {
  if(!row.id)  return
  try {
    await proxy?.$modal.confirm(row.status === 'Enabled' ? t('crud.action.tooltip.enable') : t('crud.action.tooltip.disabled'))
    await changeOssConfigStatus(row.id, row.status)
    ElMessage.success(t('operate.tooltip.success'))
    getData()
  } catch (err) {
    row.status = row.status === 'Enabled' ? 'Disabled' : 'Enabled'
  }
}

</script>

<style lang="scss" scoped></style>
